define([], function() {
    'use strict';
    /**
     * 导航组件
     * @param {*} options 
     * @param id - 导航容器
     * @param navList - 导航item的list
     * 
     * @function onItemClick - 导航item的点击事件回调
     */
    function Nav(options){
        if(!options.id){
            throw new Error('缺少容器id');
        }
        this.id = options.id;
        this.box = $("#" + options.id);
        this.navList = options.navList || [];
        this.onItemClick = options.onItemClick;
        this.init();
    }

    Nav.prototype.init = function(){
        this.renderHtml();
        this.setListenFun();
        this.setListener();
    }

    Nav.prototype.renderHtml = function(){
        var hash = window.location.hash;
        hash = /^\#/.test(hash) ? hash.substring(1) : hash;
        var str = '<div class="nav"><div class="nav-list-box"><div class="nav-list">';
        this.navList.forEach(function(item){
            str += '<div class="nav-list-item '+ (hash == item.path ? 'active' : '') +'" data-path="'+ item.path +'">'+ item.name +'</div>';
        })
        str += '</div></div></div>'
            + '<div class="bar">||</div>';
        this.box.html(str);
    }

    Nav.prototype.setListenFun = function(){
        var that = this;
        this.clickFunc = function(e){
            var _this = e.target;
            var path = $(_this).data('path');
            $(_this).addClass('active').siblings().removeClass('active');
            var items = that.navList.filter(function(aItem){
                return aItem.path == path;
            });
            if(that.onItemClick){
                that.onItemClick(items[0] || null);
            }
        }
    }

    Nav.prototype.setListener = function(){
        this.box.off('click', '.nav-list-item', this.clickFunc);
        this.box.on('click', '.nav-list-item', this.clickFunc);
    }

    return Nav;
});